<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  <title>购买课程</title>
  <link rel="stylesheet" type="text/css" href="__CSS__api.css"/>
  <link rel="stylesheet" type="text/css" href="__CSS__aui.css"/>
  <style>
    body {
      background: #F5F5F5;
      margin: 0;
      padding: 0;
    }

    .data {
      background: #fff;
      height: 5.8rem;
      overflow: hidden;
      margin-bottom: 0.5rem;
    }

    .money {
      color: #333;
      font-size: 1.5rem;
      text-align: center;
      margin-top: 0.8rem;

    }

    .fuhao {
      margin-right: 0.1rem;
      font-size: 0.75rem;
    }

    .courseName {
      color: #999;
      font-size: 0.6rem;
      text-align: center;

    }

    .box {
      padding: 0 0.7rem;
      background: #fff;
    }

    .payType {
      height: 2.75rem;
      align-items: center;
    }

    .weixin {
      width: 1.75rem;
      height: 1.75rem;
    }

    .type {
      color: #333;
      font-size: 0.75rem;
      margin-left: 0.4rem;
    }

    input[type="radio"] {
      -webkit-appearance: none;
      width: 1.1rem;
      height: 1.1rem;
      vertical-align: middle;
      background: #fff url(__IMG__uncheck.png) no-repeat center center;
      /*复选框的背景图，就是上图*/
      background-size: 1.1rem 1.1rem;
    }

    input[type="radio"]:checked {
      -webkit-appearance: none;
      width: 1.1rem;
      height: 1.1rem;
      vertical-align: middle;
      background: #fff url(__IMG__checked.png) no-repeat center center;
      /*复选框的背景图，就是上图*/
      background-size: 1.1rem 1.1rem;
    }

    .underLine {
      border: none;
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: bottom;
      background-image: linear-gradient(0, #EDEDED, #EDEDED 50%, transparent 50%);
      background-image: -webkit-linear-gradient(90deg, #EDEDED, #EDEDED 50%, transparent 50%);
    }

    .toPay {
      width: 91.6%;
      height: 2.5rem;
      line-height: 2.5rem;
      font-size: 0.8rem;
      font-weight: 500;
      color: #fff;
      background: #E73C5C;
      text-align: center;
      margin: auto;
      margin-top: 2.5rem;
      border-radius: 0.25rem;
    }
  </style>
</head>
<body>
<div class="data">
  <div class="money"><span class="fuhao">¥</span>{$info.classroom_price}</div>
  <div class="courseName">{$info.classroom_title}</div>
</div>
<div class="box" style="display: none;">
  <div class="payType flex-wrap  underLine">
    <img src="__IMG__weixin.png" alt="" class="weixin">
    <div class="type">微信支付</div>
    <div class="flex-con"></div>
    <input type="radio" name="select" data-buy="1" checked>
  </div>
  <div class="payType flex-wrap">
    <img src="__IMG__alipay.png" alt="" class="weixin">
    <div class="type">支付宝支付</div>
    <div class="flex-con"></div>
    <input type="radio" name="select" data-buy="2">
  </div>
</div>
<input type="hidden" name="classroom_id" value="{$info.id}">
<div class="toPay" onclick="buy()">立即支付</div>
<div class="all_div" style="display:none;width: 100%;height: 100%;background-color: gray;position: absolute;z-index: 100;opacity: 0.5;top: 0;left: 0;background-color: black"></div>
</body>
<script type="text/javascript" src="__JS__jquery.min.js"></script>
<script type="text/javascript" src="__JS__layer_mobile/layer.js"></script>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript">
  apiready = function () {

  };

  //购买
  function buy () {
      var classroom_id = $('input[name="classroom_id"]').val();
      $.ajax({
            url:'{:url("Classroom/buy")}',
            data: {classroom_id:classroom_id},//
            type:'POST',
            dataType:'HTML',
            success: function(returndata){
                if(returndata == 1 || returndata == 2){
                    layer.open({
                        content: '订单生成失败'
                        ,skin: 'msg'
                        ,time: 2 //2秒后自动关闭
                    });
                }else{
                    $('.all_div').css('display','block');
                    $('.all_div').html(returndata);
                }
            },
            error:function () {
                alert('Ajax error!');
            }
        })
    }

</script>
</html>
